<template>
  <div class="body">
    <!-- 搜索 -->
    <div class="search">
      <img
        class="icon"
        :src="require('../../assets/screen/search.png')"
        alt=""
      />
      <input
        v-model="searchKey"
        class="serach_input"
        placeholder="请输入企业或产业名称"
        @input="searchEvent"
        @focus="searchEvent"
        @blur="closeDrop"
      />
      <ul class="options" v-if="inputList && inputList.length > 0">
        <li
          class="options_item"
          v-for="(item, index) in inputList"
          :key="index"
          @click="toWhere(item)"
        >
          <span class="title_type">{{ item.key }}</span>
          <span class="text_type">{{ item.value }}</span>
        </li>
      </ul>
      <div class="btn" @click="getQueryMainPageSeachItem()">搜索</div>
    </div>
    <!-- 产业 -->
    <div class="main" v-if="searchList.length == 0">
      <div class="item" v-for="(item, index) in ItemList" :key="index">
        <div class="new_item" @click="toWhere1(item, index)">
          <img :src="imgObj[item]" alt="" />
          <p>
            {{ item }}
            <img
              v-if="index >= 5"
              :src="require('../../assets/screen/lock.png')"
            />
            <img v-if="false" :src="require('../../assets/screen/lock.png')" />
          </p>
        </div>
      </div>
    </div>
    <!-- 列表 -->
    <div class="box" v-else>
      <p class="result">
        找到 <span class="num">{{ searchList.length }}</span> 条与 “{{
          keyWards
        }}” 相关的产业信息
      </p>
      <div class="list">
        <div class="item" v-for="(item, index) in searchList" :key="index">
          <div class="left">
            <img :src="imgObj[item.type]" alt="" />
            <p>{{ item.type }}</p>
          </div>
          <div class="right">
            <p class="title">{{ item.key }}</p>
            <p class="text">{{ item.value }}</p>
          </div>
        </div>
      </div>
    </div>
    <div></div>
  </div>
</template>

<script>
import { queryMainPageSeachItem } from "@/api/screen/index";
import dzzx from "@/assets/screen/estate/dzxx.png";
import zbzz from "@/assets/screen/estate/zbzz.png";
import swyy from "@/assets/screen/estate/swyy.png";
import xjcl from "@/assets/screen/estate/xjcl.png";
import xnyqc from "@/assets/screen/estate/xnyqc.png";
import dsjcy from "@/assets/screen/estate/dsjcy.png";
import bdtcy from "@/assets/screen/estate/bdtcy.png";
import yyz from "@/assets/screen/estate/yyz.png";
import xdwlcy from "@/assets/screen/estate/xdwlcy.png";
import qccy from "@/assets/screen/estate/qccy.png";
import fzclcy from "@/assets/screen/estate/fzclcy.png";
import more from "@/assets/screen/estate/more.png";

import csdb from "@/assets/screen/feature/csdb.png";
import cyhx from "@/assets/screen/feature/cyhx.png";
import cyjz from "@/assets/screen/feature/cyjz.png";
import cykb from "@/assets/screen/feature/cykb.png";
import cyqj from "@/assets/screen/feature/cyqj.png";
import cytp from "@/assets/screen/feature/cytp.png";
import cyyfb from "@/assets/screen/feature/cyyfb.png";
import cyzs from "@/assets/screen/feature/cyzs.png";
import ltqy from "@/assets/screen/feature/ltqy.png";
import qyfb from "@/assets/screen/feature/qyfb.png";
import qysx from "@/assets/screen/feature/qysx.png";
import sdfx from "@/assets/screen/feature/sdfx.png";

import cx from "@/assets/screen/firm/cx.png";
import djs from "@/assets/screen/firm/djs.png";
import dl from "@/assets/screen/firm/dl.png";
import gxkj from "@/assets/screen/firm/gxkj.png";
import kj from "@/assets/screen/firm/kj.png";
import my from "@/assets/screen/firm/my.png";
import mykj from "@/assets/screen/firm/mykj.png";
import sjqy from "@/assets/screen/firm/sjqy.png";
import skj from "@/assets/screen/firm/skj.png";
import xjr from "@/assets/screen/firm/xjr.png";
import zjtx from "@/assets/screen/firm/zjtx.png";
import more1 from "@/assets/screen/firm/more.png";

export default {
  components: {},
  data() {
    return {
      toptype: "产业视角",
      imgObj: {
        电子信息产业: dzzx,
        装备制造产业: zbzz,
        生物医药产业: swyy,
        先进材料产业: xjcl,
        新能源汽车产业: xnyqc,
        大数据产业: dsjcy,
        半导体产业: bdtcy,
        元宇宙: yyz,
        现代物流产业: xdwlcy,
        汽车产业: qccy,
        纺织材料产业: fzclcy,
        更多: more, //以上产业
        城市对标: csdb,
        产业画像: cyhx,
        产业矩阵: cyjz,
        产业看板: cykb,
        产业全景: cyqj,
        产业图谱: cytp,
        产业园分布: cyyfb,
        产业指数: cyzs,
        龙头企业: ltqy,
        区域分布: qyfb,
        企业筛选: qysx,
        赛道分析: sdfx, //以上功能
        创新型中小企业: cx,
        瞪羚计划企业: dl,
        独角兽企业: djs,
        高新技术: gxkj,
        科技型中小企业: kj,
        民营企业创新100强: my,
        省民营科技企业: mykj,
        省级企业技术中心评价: sjqy,
        省级科技企业: skj,
        专精特新小巨人: xjr,
        专精特新: zjtx,
        更多: more1, //以上企业
      }, // 图片数组
      searchKey: "", //搜索关键字
      keyWards: "", //展示的字
      timer: null,
      len: false,
      ItemList: [], // 产业数据
      featureList: [
        "产业看板",
        "产业全景",
        "产业图谱",
        "产业矩阵",
        "产业画像",
        "区域分布",
        "城市对标",
        "企业筛选",
        "产业园分布",
        "产业指数",
        "龙头企业",
        "赛道分析",
      ], // 功能数据
      firmList: [
        "高新技术",
        "独角兽企业",
        "专精特新",
        "专精特新小巨人",
        "科技型中小企业",
        "瞪羚计划企业",
        "创新型中小企业",
        "民营企业创新100强",
        "省民营科技企业",
        "省级企业技术中心评价",
        "省级科技企业",
        "更多",
      ], // 企业数据
      searchList: [], //搜索列表
      inputList: [],
      timeInput: "",
      getData: null,
    };
  },
  created() {
    this.getData = this.debounce(this.getQueryMainPageSeachItem1, 500);
    this.getQueryMainPageSeachItem();
  },
  methods: {
    closeDrop() {
      setTimeout(() => {
        this.inputList = [];
      }, 500);
    },
    // 产业大类
    getQueryMainPageSeachItem() {
      queryMainPageSeachItem({
        searchKey: this.searchKey,
      }).then((res) => {
        this.keyWards = this.searchKey;
        if (res.code == 200) {
          if (this.searchKey == "") {
            // this.ItemList = res.data.pnameList || [];
            // this.searchList = []
            let arr = res.data.pnameList || [];
            let newArr = [
              ...arr,
              "大数据产业",
              "半导体产业",
              "元宇宙",
              "现代物流产业",
              "汽车产业",
              "纺织材料产业",
              "更多",
            ];
            this.ItemList = newArr;
            this.searchList = [];
          } else {
            if (res.data.mhList) {
              this.searchList = res.data.mhList.map((item) => {
                item = {
                  ...item,
                  type: item.value.substring(0, item.value.indexOf("-")),
                }; //数组赋值并新增对象
                return item;
              });
            }
          }
        }
      });
    },
    // 实时搜索
    getQueryMainPageSeachItem1(time) {
      queryMainPageSeachItem({
        searchKey: this.searchKey,
      }).then((res) => {
        if (res.code == 200) {
          if (time === this.timeInput) {
            this.inputList = res.data.mhList.slice(0, 10);
          }
        }
        console.log(this.inputList, "this.inputList");
      });
    },
    searchEvent() {
      this.getData((this.timeInput = new Date().getTime()), 500);
    },
    toWhere(item) {
      this.$emit("toWhere", item);
    },
    toWhere1(item) {
      console.log(item, "点击点击");
      let status = [
        "电子信息产业",
        "装备制造产业",
        "生物医药产业",
        "先进材料产业",
        "新能源汽车产业",
        "产业看板",
        "产业全景",
        "产业图谱",
        "产业矩阵",
        "产业画像",
        // "高新技术",
        // "独角兽企业",
        "专精特新",
        // "专精特新小巨人",
        // "科技型中小企业",
      ].includes(item);
      if (status) {
        if (this.toptype == "产业视角") {
          this.$emit("toWhere", item,'产业视角');
        } else if (this.toptype == "功能视角") {
          this.$emit("toWhere", item,'功能视角');
        } else {
          this.$emit("toWhere", "专精特新");
        }
      } else {
        this.$message.warning(`抱歉，该模块暂未开放！`);
      }
    },
    // 防抖
    debounce(fn, wait) {
      let timer = null;
      return function (...args) {
        if (timer) {
          clearTimeout(timer);
          timer = null;
        }
        timer = setTimeout(function () {
          fn.apply(this, args);
        }, wait);
      };
    },
    clearTimer() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
    },
    Fcheck(item, index) {
      console.log(item, index, "点击了22");
      this.toptype = item.title;
      if (item.title == "产业视角") {
        this.getQueryMainPageSeachItem();
      } else if (item.title == "功能视角") {
        console.log("到这里了");
        this.ItemList = this.featureList;
      } else if (item.title == "企业视角") {
        this.ItemList = this.firmList;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.body {
  width: 100%;
  height: 100%;

  .search {
    width: 900px;
    height: 80px;
    margin: 30px auto;
    position: relative;

    .icon {
      width: 30px;
      height: 30px;
      position: absolute;
      left: 20px;
      top: 13px;
    }

    .serach_input {
      width: 900px;
      height: 56px;
      background: #143f8e;
      border-radius: 46px;
      border: none;
      padding-left: 60px;
      color: #fff;
      font-size: 20px;
    }

    .input::input-placeholder {
      color: #438ef5;
    }

    .options {
      width: 800px;
      height: 10px auto;
      background-color: #fff;
      margin: 0 0 0 50px;
      border-radius: 5px;
      padding-top: 10px;
      padding-left: 0;
      padding-right: 0;
      padding-bottom: 10px;
      position: absolute;
      z-index: 999;
      .options_item {
        height: 32px;
        margin: 0;
        list-style: none;
        line-height: 32px;
        cursor: pointer;
        padding: 0 10px;
        cursor: pointer;

        .title_type {
          font-size: 15px;

          // width: 120px;
          // border: 1px solid red
        }

        .text_type {
          width: 350px;
          font-size: 12px;
          text-align: right;
          float: right;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }
      }

      .options_item:hover {
        background-color: #f5f6f9;
        color: #4e71f2;
      }
    }

    .btn {
      width: 104px;
      height: 52px;
      text-align: center;
      background: linear-gradient(0deg, #2981ee 0%, #135ccf 100%);
      border-radius: 61px 62px 61px 61px;
      line-height: 52px;
      font-size: 20px;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #d7f4ff;
      position: absolute;
      right: 2px;
      top: 2px;
      cursor: pointer;
    }
  }

  .main {
    width: 100%;
    height: auto;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item {
      width: 22%;
      margin: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      .new_item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 100%;
        }
        p {
          color: #fff;
          font-size: 28px;
          position: absolute;
          font-family: YouSheBiaoTiHei;
          font-weight: normal;
          color: #ffffff;
          text-shadow: 1px 2px 8px rgba(12, 39, 106, 0.26);
          img {
            width: 15px;
            height: 20px;
          }
        }
      }
    }

    .item :hover {
      transform: scale(1.1);
      transition: all 0.5s ease 0s;
      -webkit-transform: scale(1.1);
      -webkit-transform: all 0.5s ease 0s;
    }
  }

  .box {
    width: 100%;
    height: 600px;
    margin: 50px 20px;
    padding: 10px 20px;
    .result {
      color: #fff;

      .num {
        color: #d7f4fe;
        font-weight: bold;
      }
    }

    .list {
      height: 500px;
      overflow-y: auto;

      .item {
        display: flex;
        padding: 10px;
        border-bottom: 1px dashed #fff;

        .left {
          position: relative;

          img {
            display: block;
            width: 200px;
            border-radius: 10px;
          }

          p {
            color: #fff;
            font-size: 18px;
            font-weight: bold;
            display: block;
            text-align: center;
            position: absolute;
            top: 18%;
            left: 0;
            right: 0;
          }
        }

        .right {
          margin-left: 20px;
          text-align: left;
          .title {
            color: #fff;
            font-size: 18px;
            font-weight: bold;
            text-align: left;
          }

          .text {
            color: #fff;
          }
        }
      }

      .item:last-child {
        border-bottom: unset;
      }
    }

    ::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>
